import React, { Component } from 'react';
import { View, ScrollView } from 'react-native';

import ListModel from '../models/List';
import commonStyles from '../styles/commonStyles';
import { imgUrlReplace } from '../utils/tools';

import ListTab from '../components/ListTab';
import CourseList from '../components/CourseList';
import PageLoading from '../components/PageLoading';
// import MyRefreshControl from '../components/MyRefreshControl';

const listModel = new ListModel();

class ListPage extends Component{

  constructor(props) {
    super(props);

    this.state = {
      fieldData: [],
      /**
       * courseData: {
       *   all: [],
       *   0: [],
       *   1: [],
       *   2: []
       * }
       */
      courseData: {},
      curIdx: 0,
      curField: 'all',
      isRefreshing: false,
      pageLoadingShow: false
    }
  }

  //暂时写法：gitee图床挂了，改为七牛
  formatDataUrl(courseData, field) {
    courseData[field].forEach((item) => {
      item.img = imgUrlReplace(item.img);
    });
  }

  getCourseField() {
    listModel.getCourseFields().then((res) => {
      const data = res.result;

      this.setState({
        fieldData: [{ field: 'all', field_name: '全部课程' }].concat(data)
      });
    });
  }

  getCourses(field) {
    this.setState({ pageLoadingShow: true });

    const {courseData} = this.state;

    listModel.getCourses(field).then((res) => {
      courseData[field] = res.result;

      this.formatDataUrl(courseData, field);

      setTimeout(() => {
        this.setState({
          courseData: courseData,
          pageLoadingShow: false
        });
      }, 300);
    });
  }

  componentDidMount() {
    this.getCourseField();
    this.getCourses('all');
  }

  //点击tab-item 切换和请求列表数据
  onTabClick(field, index) {
    this.setState({
      curIdx: index,
      curField: field
    }, () => {
      const { courseData, curField } = this.state;

      //如果该tab-item项数据不存在才去请求数据
      !courseData[field] && this.getCourses(curField);
    });
  }

  //处理页面刷新的函数
  onPageRefresh() {
    const { isRefreshing, curField } = this.state;

    //判断什么情况时需要刷新下拉
    if (isRefreshing) {
      //当正在刷新时中止程序执行
      return;
    } 

    //用户触发下拉菜单时,将其他转为正在刷新
    this.setState({ isRefreshing: true }, () => {
      //重新请求数据
      this.getCourses(curField);
    });

    setTimeout(() => {
      this.setState({
        isRefreshing: false
      })
    }, 300);

    
  }

  render() {
    const {
      fieldData,
      curIdx,
      courseData,
      curField,
      isRefreshing,
      pageLoadingShow
    } = this.state;

    const { navigation } = this.props;
    return (
      <View style={commonStyles.container}>
        <ListTab
          fieldData={fieldData}
          curIdx={curIdx}
          onTabClick={ this.onTabClick.bind(this) }
        />
        <ScrollView
          showsVerticalScrollIndicator={false}
          // refreshControl={
          //   <MyRefreshControl
          //     isRefreshing={isRefreshing}
          //     onPageRefresh={this.onPageRefresh.bind(this)}
          //   />
          // }
        >
          {
            pageLoadingShow ? 
              <PageLoading/>
                :
              <CourseList
                  courseData={courseData[curField] || []}
                  navigation={navigation}
              />
          }
        </ScrollView>
      </View>
    );
  }
}

export default ListPage;